<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评价管理-下详情</title>
		<link rel="stylesheet" type="text/css" href="css/base/base_evaluation_management_particulars.css" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- 评分开始 -->
		<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<!-- 评分结束 -->
		<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/base/icheck-bootstrap.css">
		<!-- 时分插件 --><link href="css/base/hourminute.css" rel="stylesheet" type="text/css"/>
		<script src="js/base/highcharts.js"></script>
		<script src="js/base/exporting.js"></script>
		<script src="js/base/data.js"></script>
		<script src="js/base/highcharts-zh_CN.js"></script>
		<script src="js/jquery-1.9.1.js"></script>
		<script src="js/base/jquery.rating-stars.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 日期插件开始 -->
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
		 
		<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment-with-locales.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
		<!-- 日期插件结束 -->
		<script src="js/base/timePacker.js"></script>
	</head>
	<body>
		<header>
			<!-- 头部暂时不用写 -->
		</header>
		<section>
				<div id="evaluation-management-particulars-top">
					<div id="select1">
						<!-- 研学名称 -->
						<select style="width: 20%;margin-left: 20px;float: left;" class="form-control form-control-chosen">
							<option>研学名称</option>
							<option>焦作云台山研学之旅</option>
							<option>嵩山少林寺研学之旅</option>
							<option>新郑炎黄故里研学之旅</option>
						</select>
						<!-- 学校 -->
						<select style="width: 20%;margin-left: 30px;float: left;" class="form-control form-control-chosen col-lg-3">
							<option>学校</option>
							<option>郑州市第八中学</option>
							<option>郑州纬一路小学</option>
							<option>河南省实验中学</option>
						</select>
						<!-- 日期插件开始 -->
						<div style="width: 15%;margin-left: 30px;float: left;" class='input-group date col-lg-2' id='datetimepicker1'>
							<input id="time" type='text' class="form-control"  />
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
						<!-- 日期插件结束 -->
						<!-- 时间插件开始 -->
						<div style="width: 15%;margin-left: 30px;float: left;" class="form-control" id="div1">选择时间</div>
						<!-- 时间插件结束 -->
						<!-- 查询按钮 -->
						<input style="width: 10%;margin-left: 30px;float: left;" class="form-control" type="submit" id="searchbtn" name="" value="查询" />
					</div>
					<div id="select2">
						<input id="searchtext" type="text" placeholder="请输入" />
						<img src="img/base/search-icon.png" width="20px" height="20px" >
					</div>
					<div id="selectresultlist">
							<ul>
								<li>
									<div class="resultlist-radiobtn">
										
										
										
										
										<div class="radio icheck-turquoise">
										<input type="radio" checked id="turquoise1" name="turquoise" />
										<label for="turquoise1"></label>
										</div>
										
										
									</div>
									<div class="resultlist-img-div">
										<img class="resultlist-img" src="img/base/userheader.jpg"  >
									</div>
									<div class="resultlist-info">
										<ul style="margin-top: 0.5%;">
											<li>云台山研学计划6</li>
											<li class="bold">审批编号：ZZDBCJZX001</li>
											<li>李明</li>
											<li>开始时间</li>
											<li>计划结束时间</li>
										</ul>
										<ul>
											<li>郑州市第八中学</li>
											<li>三年级&nbsp;&nbsp;89人</li>
											<li>18900000000</li>
											<li>2020-3-3 14:20</li>
											<li>2020-3-7 14:20</li>
										</ul>
									</div>
								</li>
								<li>
									<div class="resultlist-radiobtn">
										
										
										
										<div class="radio icheck-turquoise">
										<input type="radio" id="turquoise2" name="turquoise" />
										<label for="turquoise2"></label>
										</div>
										
										
										
										
									</div>
									<div class="resultlist-img-div">
										<img class="resultlist-img" src="img/base/userheader.jpg"  >
									</div>
									<div class="resultlist-info">
										<ul style="margin-top: 0.5%;">
											<li>云台山研学计划6</li>
											<li class="bold">审批编号：ZZDBCJZX001</li>
											<li>李明</li>
											<li>开始时间</li>
											<li>计划结束时间</li>
										</ul>
										<ul>
											<li>郑州市第八中学</li>
											<li>三年级&nbsp;&nbsp;89人</li>
											<li>18900000000</li>
											<li>2020-3-3</li>
											<li>2020-3-7</li>
										</ul>
									</div>
								</li>
							</ul>
					</div>
				</div>
			<!-- 评分、图表 -->
			<div id="synthesizeevaluate">
				<div>
					<div id="synthesizeevaluate-top">
						<img src="img/base/star.png" width="30px" height="30px" >
						<span>9.3</span>
						<span>综合评分</span>
					</div>
					<div id="synthesizeevaluate-bottom">
						<ul style="margin-bottom: 0;">
							<li>
								环境设施<span style="float: right;color: #FFBF44;">9.3</span>
								<div class="progress" style="height: 10px;">
																		 <!-- 使用EL表达式给width值的时候乘以10 -->
								    <div class="progress-bar bg-success" style="width:93%;"></div>
								</div>
							</li>
							<li>
								接待服务<span style="float: right;color: #FFBF44;">9.2</span>
								<div class="progress" style="height: 10px;">
								    <div class="progress-bar bg-success" style="width:92%;"></div>
								</div>
							</li>
							<li>
								课程设计<span style="float: right;color: #FFBF44;">8.7</span>
								<div class="progress" style="height: 10px;">
								    <div class="progress-bar bg-success" style="width:87%;"></div>
								</div>
							</li>
							<li>
								师资力量<span style="float: right;color: #FFBF44;">8.9</span>
								<div class="progress" style="height: 10px;">
								    <div class="progress-bar bg-success" style="width:89%;"></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div>
					<div id="container" style="width: 70%; height: 300px; margin: 0 auto"></div>
					<table id="datatable" hidden="hidden">
						<thead>
							<tr>
								<th></th>
								<th>学生</th>
								<th>老师</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>环境设施</th>
								<td>2</td>
								<td>4</td>
							</tr>
							<tr>
								<th>接待服务</th>
								<td>5</td>
								<td>1</td>
							</tr>
							<tr>
								<th>课程设计</th>
								<td>1</td>
								<td>1</td>
							</tr>
							<tr>
								<th>师资力量</th>
								<td>2</td>
								<td>4</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 评价数据 -->
			<div id="evaluatedata">
				<p>评价数据</p>
				<div>
					<!-- 学生评价 -->
					<div id="studentevaluate">
						<p>
							<img src="img/base/dot.png" width="30px" height="30px" >学生评价
						</p>
						<ul>
							<li>接待学生人数：5200人</li>
							<li>参与评分学生：4500人</li>
							<li>学生评分平均值：8</li>
							<li>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<table id="studentevaluate-firsttable" border="1" bordercolor="silver" cellspacing="0" cellpadding="" align="center">
							<tr>
								<th class="center" width="15%">评分内容</th>
								<th class="center">课程</th>
								<th class="center">师资</th>
								<th class="center">接待</th>
								<th class="center">餐饮</th>
								<th class="center">环境</th>
								<th class="center">共计</th>
							</tr>
							<tr>
								<th class="center">分值</th>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
							</tr>
							<tr>
								<th class="center">学生评分平均值</th>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
							</tr>
						</table>
					</div>
					<!-- 教师评价 -->
					<div id="teacherevaluate">
						<p>
							<img src="img/base/dot.png" width="30px" height="30px" >教师评价
						</p>
						<ul>
							<li>接待教师人数：5200人</li>
							<li>参与评分教师：4500人</li>
							<li>教师评分平均值：8</li>
							<li>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<table id="teacherevaluate-firsttable" border="1" bordercolor="silver" cellspacing="0" cellpadding="" align="center">
							<tr>
								<th class="center" width="15%">评分内容</th>
								<th class="center">课程</th>
								<th class="center">师资</th>
								<th class="center">接待</th>
								<th class="center">餐饮</th>
								<th class="center">环境</th>
								<th class="center">共计</th>
							</tr>
							<tr>
								<th class="center">分值</th>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
								<td align="center">3</td>
							</tr>
							<tr>
								<th class="center">教师评分平均值</th>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
								<td align="center">5</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<!-- 评价详情 -->
			<div id="evaluateinfo">
				<p>评价详情</p>
				<div>
					<ul>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</section>
		<footer>
			<!-- 尾部 -->
		</footer>
		<script type="text/javascript">
			// 柱状图
			var chart = Highcharts.chart('container', {
			    data: {
			        table: 'datatable'
			    },
			    chart: {
			        type: 'column'
			    },
				title: {
					text: '评价概览'
				},
			    yAxis: {
			        allowDecimals: false,
			        title: {
			            text: '',
			            rotation: 0
			        }
			    },
			    tooltip: {
			        formatter: function () {
			            return '<b>' + this.series.name + '</b><br/>' +
			                this.point.name.toLowerCase() + '评分：' + this.point.y+'分';
			        }
			    }
			});
			// 评分
			var ratingOptions = {
			    selectors: {
			        starsSelector: '.rating-stars',
			        starSelector: '.rating-star',
			        starActiveClass: 'is--active',
			        starHoverClass: 'is--hover',
			        starNoHoverClass: 'is--no-hover',
			        targetFormElementSelector: '.rating-value'
			    }
			};
			
			$(".rating-stars").ratingStars(ratingOptions);
			
			$('#datetimepicker1').datetimepicker({
				format: 'YYYY-MM-DD',
				locale: moment.locale('zh-cn')
			});
			// 查询按钮悬浮
			$("#searchbtn").hover(function() {
				$(this).css({"background":"springgreen","color":"white","transition":"all 0.3s linear"});
			}, function() {
				$(this).css({"background":"white","color":"black","transition":"all 0.3s linear"});
			});
			//
			$("#div1").bind('click',function(event){timePacker($(this),event)});
		</script>
	</body>
</html>
